import React from 'react';
import { useSelector } from 'react-redux';
import { ConfigProvider, Typography, theme } from 'antd';
import { RootState } from '@/store';
import { selectSelectedSegment } from '@/store/selectedSegmentSlice';
import Settings from '@/components/form/v2/Settings';

const { Text } = Typography;

// 深色主题配置
const darkTheme = {
    algorithm: theme.darkAlgorithm,
    token: {
        colorPrimary: '#715BB8',
        colorBgContainer: '#1f1f1f',
        colorBgElevated: '#2a2a2a',
        colorText: '#ffffff',
        colorTextSecondary: 'rgba(255, 255, 255, 0.7)',
        colorBorder: '#434343',
        borderRadius: 6,
    },
    components: {
        Tabs: {
            itemColor: 'rgba(255, 255, 255, 0.7)',
            itemHoverColor: '#ffffff',
            itemSelectedColor: '#715BB8',
            inkBarColor: '#715BB8',
        },
        Card: {
            colorBgContainer: '#2a2a2a',
            colorBorder: '#434343',
        },
    },
};

const SegmentFormSwitcher: React.FC = () => {
    const selectedSegment = useSelector((state: RootState) => selectSelectedSegment(state));

    // 根据选中片段的类型渲染对应的基本配置表单
    const renderBasicConfigForm = () => {
        console.log('form:selectedSegment', selectedSegment);
        if (!selectedSegment) {
            return (
                <div className="no-segment-placeholder">
                    <Text type="secondary">请选择一个片段来配置其属性</Text>
                </div>
            );
        }

        // 根据片段类型确定 segmentType
        let segmentType: 'video' | 'audio' | 'text' = 'video';
        switch (selectedSegment.type) {
            case 'video':
            case 'image':
                segmentType = 'video';
                break;
            case 'audio':
                segmentType = 'audio';
                break;
            case 'text':
                segmentType = 'text';
                break;
            default:
                return (
                    <div className="no-segment-placeholder">
                        <Text type="secondary">不支持的片段类型</Text>
                    </div>
                );
        }

        return (
            <Settings
                segmentType={segmentType}
                draftId={selectedSegment.draftId}
                trackId={selectedSegment.trackId}
                segmentId={selectedSegment.id}
            />
        );
    };

    // 渲染主要内容
    const renderMainContent = () => {
        return renderBasicConfigForm();
    };

    return (
        <ConfigProvider theme={darkTheme}>
            <div className="segment-form-switcher-container">{renderMainContent()}</div>
            <style>{`
                .segment-form-switcher-container {
                    height: 100%;
                    width: 100%;
                    overflow: auto;
                    background-color: #1a1a1a;
                    padding: 0;
                    margin: 0;
                }
                
                .segment-form-switcher-container::-webkit-scrollbar {
                    width: 8px;
                    height: 8px;
                }
                
                .segment-form-switcher-container::-webkit-scrollbar-track {
                    background: #1a1a1a;
                }
                
                .segment-form-switcher-container::-webkit-scrollbar-thumb {
                    background: #434343;
                    border-radius: 4px;
                }
                
                .segment-form-switcher-container::-webkit-scrollbar-thumb:hover {
                    background: #555555;
                }
                
                .no-segment-placeholder {
                    padding: 20px;
                    text-align: center;
                    color: rgba(255, 255, 255, 0.7);
                }
            `}</style>
        </ConfigProvider>
    );
};

export default SegmentFormSwitcher;
